import { useState, useEffect } from "react";
import { Swiper } from 'antd-mobile'
import { getBanner } from '../request/app'
import '../assets/css/mine.css'
function Mine() {
    let [mine, setmine] = useState([
        {
            id: 1,
            con: '地址管理',
            img: require('../assets/img/mine/icon_address@3x.png')
        },
        {
            id: 2,
            con: '我的钱包',
            img: require('../assets/img/mine/icon_wallet@3x.png')
        },
        {
            id: 3,
            con: '我的二维码',
            img: require('../assets/img/mine/icon_qr-code@3x.png')
        },
        {
            id: 4,
            con: '我的小伙伴',
            img: require('../assets/img/mine/icon_buddies@3x.png')

        },
        {
            id: 5,
            con: '0元试用',
            img: require('../assets/img/mine/icon_tryout@3x.png')

        }
    ])
    let [nickname, setname] = useState()
    let [list, setlist] = useState([])
    useEffect(() => {
        
        getBanner().then(res => {
            if (res.code == 200) {
                setlist([...res.list])

            }
        })
        if(sessionStorage.getItem('userInfo')){
            setname(JSON.parse(sessionStorage.getItem('userInfo')).nickname)
        }else{
            setname('未登录')
        }
    }, [])
    return (
        <div className="mine">
            <div className='header'>我的</div>
            <div className="border-bottom">
                <div className="bor_bot_1 fl clearfix">
                    <img src={require('../assets/img/mine/wode.png')} alt="" />
                </div>
                <div className="bor_bot_2 fl clearfix">
                    <p>昵称：{nickname}</p>
                </div>
                <div className="bor_bot_3 fr clearfix">
                    <p><img src={require('../assets/img/mine/红包.png')} alt="" />每日签到</p>
                </div>
                <div className="bor_bot_4">
                    <p>
                        <a href="#"><b>12</b><br />
                            <span> 我的收藏</span></a>
                    </p>
                    <p>
                        <a href="#"><b>12</b><br />
                            <span>浏览记录</span></a>
                    </p>
                    <p>
                        <a href="#">￥<b>12</b><br />
                            <span>我的红包</span></a>
                    </p>
                    <p>
                        <a href="#"><b>12</b><br />
                            <span>优惠券</span></a>
                    </p>
                </div>
                <div className="bor_bot_5">
                    <div className="bor_bot_cen1">
                        <b>我的订单</b>
                        <span className="fr clearfix"> <a href="#">全部订单<span className="iconfont icon-gengduo1"></span></a> </span>
                    </div>
                    <div className="bor_bot_6">
                        <div>
                            <a href="#"><img src={require('../assets/img/mine/1.png')} alt="" /><br />待付款</a>
                        </div>
                        <div>
                            <a href="#"><img src={require('../assets/img/mine/2.png')} alt="" /><br />待收货</a>
                        </div>
                        <div>
                            <a href="#"><img src={require('../assets/img/mine/3.png')} alt="" /><br />评价</a>
                        </div>
                        <div>
                            <a href="#"><img src={require('../assets/img/mine/4.png')} alt="" /><br />售后/退款</a>
                        </div>
                    </div>
                </div>
            </div>
            <div className='body_box'>
                <div className='banner'>
                    <Swiper loop autoplay>{
                        list.map((item) => (
                            <Swiper.Item key={item.id} loop>
                                <img src={item.img} alt="" className='banner_img' />
                            </Swiper.Item>
                        ))

                    }</Swiper>
                </div>
                <div className='mine'>
                    <ul>
                        {
                            mine.map(item =>
                                <li key={item.id} className='fl clearfix'>
                                    <img src={item.img} alt="" />
                                    <br />
                                    <span>{item.con}</span>
                                </li>)
                        }
                    </ul>
                </div>
            </div>


        </div>
    )
}
export default Mine
